<template>
	<view class="emoji" :style="{height:height+'px'}">
		<view class="emoji-line" v-for="(line,i) in emoji" :key='i'>
			<view class="emoji-line-item" v-for="(item,index) in line" :key='index' @tap='clickEmoji(item)'>
				{{item}}
			</view>
		</view>
		<view class="space">
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			height:{
				type:Number,
				default:230,
			}
		},
		data() {
			return {
				emoji:[
					['😀','😃','😄','😁','😆','😅','😂'],
					['🤣','🙂','🙃','😉','😍','😘','🤭'],
					['🤩','😜','🤫','🤔','🤐','🤨','😐'],
					['🤥','😷','😴','🤢','🤮','🤧','😎'],
					['😶','😏','😒','🤠','🤓','🧐','🙉'],
					['😲','😯','😳','😭','🙈','🙊','💬'],
					['😡','😠','🤬','💔','❤','️💁','👄'],
					['👃','😤','💀','☠','️👨','👹','👺'],
					['🧒','👦','👧','🙅','🎓‍','️💻','🙆'],
					['‍🚒','🙇','👩','‍🎤','🌾','👦','‍🚀'],
					['👶','🙋','🎨️','✈','👮‍','🏭','🕵'],
					['☂','‍☔','⚖','👷','🤴','👳','🧕'],
					['🎅','👩','️👧','💂','⏳️','🎎','🗿'],
					['️🛑','🎢️','‍⌚','👗','☃','📒','🕑'],
					['🎷','🖲','️👚','💽','💾','🏮','🌻'],
					['🕚','️☎','🚾','🌹','🌷','🌼','🌳'],
					['🌴','🌵','🌾','🌿','☘','️📟','🍀'],
					['🍃','🍄','🌰','🌍','🌐','🏔','️☀'],
					['🍂','🌤️','🏖','️🌪','🌙','🌚','🌛'],
					['🗻','🏕','🌠','☁','️🌈','⛅','⛈'],
					['🌝','🌞','🌟','❄️','🌧','️💧','🌩'],
					['🌫️','🌥','️🌀','🌦','✌','🌊','✨'],
					['🖐','️✋','☄','️👌','🔥','🤞️','👍'],
					['👈','👉','👆','🖕','👇','☝','✊'],
					['👊','🤛','🤜','👏','🙌','👐','♥'],
					['🤲','✍','🤙️','💪','⬆','️🤟','↗'],
					['🤝','🙏','↘️','⬅','↔️','↖','️️️↩️'],
					['⬇','➡️️','↙','🐯','🐴','🦌','🐮'],
					['🎍️','🐒','🐶','🐱','🐳','🐙','🦈'],
					['🐽','🐏','🐔','🐣','🐤','🏄','⚽‍'],
					['🐬','🦀','🧸','🕸','️↪','🤺','🍉'],
					['🤸','‍🍋','🚄️','🏀','🏐','🍇','🍈'],
					['🍍','🍎','🍏','🍐','🍑','🍒','🏟'],
					['🍌','🏗','🚥️','🏘','️🚂','🏁','🚩'],
					['🏛','🛵️','🚡','🚠','⚠','🚧️','⛔'],
					['🚅','✈','️🚆','🚓','🚔','🚕','🚖'],
					['🚲','🛳','🚐','🚇','',''],
				]	 	
			};
		},
		methods:{
			//返回点击表情
			clickEmoji: function(item){
				this.$emit('emotion',item);
			}
		}
	}
</script>

<style lang="scss">
	.emoji{
		width: 100%;
		padding: 16rpx 10rpx 180rpx;
		box-sizing: border-box;
		overflow: hidden;
		overflow-y: auto;
		.space{
			width: 100%;
			height: 48rpx;
		}
		.emoji-line{
			display: flex;
			.emoji-line-item{
				flex: 1;
				text-align: center;
				font-size: 52rpx;
				line-height: 80rpx;
			}
		}
	}

</style>
